<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>朝阳区档案馆</title>
    <link rel="stylesheet" href="../assets/common/common.css">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <!-- 上方图片区域 -->
    <div class="header-image">
        <div class="carousel-container">
            <div class="carousel-slide">
                <img src="../assets/banner1.png" alt="Banner 1" class="carousel-image">
            </div>
            <div class="carousel-slide">
                <img src="../assets/banner2.png" alt="Banner 2" class="carousel-image">
            </div>
            <div class="carousel-slide">
                <img src="../assets/banner3.png" alt="Banner 3" class="carousel-image">
            </div>
            <div class="carousel-slide">
                <img src="../assets/banner4.png" alt="Banner 4" class="carousel-image">
            </div>
            <!-- 轮播图指示器 -->
            <div class="carousel-indicators">
                <span class="indicator active" data-slide="0"></span>
                <span class="indicator" data-slide="1"></span>
                <span class="indicator" data-slide="2"></span>
                <span class="indicator" data-slide="3"></span>
            </div>
        </div>
    </div>

    <!-- 中间菜单区域 -->
    <div class="menu-container">
        <ul class="main-menu">
            <li class="menu-item " data-menu="overview">首页</li>
            <li class="menu-item active" data-menu="overview">馆办概况
                <ul class="submenu">
                    <li class="submenu-item" data-submenu="overview1">单位概况</li>
                    <li class="submenu-item" data-submenu="overview2">法规标准</li>
                </ul>
            </li>
            <li class="menu-item" data-menu="status">工作动态</li>
            <li class="menu-item" data-menu="notices">通知公告</li>
            <li class="menu-item has-submenu" data-menu="collections">
                馆藏档案
                <ul class="submenu">
                    <li class="submenu-item" data-submenu="collection1">馆藏介绍</li>
                    <li class="submenu-item" data-submenu="collection2">查档指南</li>
                    <li class="submenu-item" data-submenu="collection3">档案公布</li>
                </ul>
            </li>
            <li class="menu-item has-submenu " data-menu="services">
                公众服务
                <ul class="submenu">
                    <li class="submenu-item" data-submenu="service1">观展预约</li>
                    <li class="submenu-item" data-submenu="service2">业务咨询</li>
                    <li class="submenu-item" data-submenu="service3">档案捐赠</li>
                </ul>
            </li>
            <li class="menu-item" data-menu="culture">档案方志文化
                <ul class="submenu">
                    <li class="submenu-item" data-submenu="culture1">网上展厅</li>
                    <li class="submenu-item" data-submenu="culture2">编研成果</li>
                </ul>
            </li>
        </ul>
    </div>

    <!-- 中部内容区域 -->
    <div class="content-container">
        <div class="bar"></div>
        <div class="content-wrapper">
            <!-- 左侧树形菜单 -->
            <div class="tree-container">
                <ul class="tree-menu">
                    <li class="tree-item" data-tree="public-service">
                        <span class="tree-text" style="color:#fff">馆办概况</span>
                    </li>
                    <li class="tree-item selected" data-tree="exhibition">
                        <span class="tree-text">单位概况</span>
                        <span class="tree-arrow">▶</span>
                    </li>
                    <li class="tree-item" data-tree="inquiry">
                        <span class="tree-text">法规标准</span>
                        <span class="tree-arrow">▶</span>
                    </li>

                </ul>
            </div>

            <!-- 右侧列表区域 -->
            <div class="list-container">
                <div class="list-header">
                    <div id="current-menu">
                        <div class="title">单位概况</div>
                    </div>
                </div>
                <div class="unit-overview" style="display: block;">
                    <div style="padding: 20px;">
                        <h3 style="margin-bottom: 20px; color: #333; font-size: 20px;">朝阳区档案馆简介</h3>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">朝阳区档案馆成立于1986年，是集中保存、管理全区档案资料的文化事业机构，负责接收、整理、保管和提供利用朝阳区党政机关、群众团体、企事业单位的重要档案。</p>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">档案馆建筑面积5000余平方米，设有档案库房、查阅大厅、陈列展览厅等功能区域，配备了现代化的档案保管和保护设施，确保档案的安全与完整。</p>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">馆藏档案涵盖了从新中国成立初期至今的各类重要文件、照片、音像资料等，内容丰富，种类齐全，为研究朝阳区的历史发展和社会变迁提供了宝贵的第一手资料。</p>
                        
                        <h3 style="margin: 25px 0 15px; color: #333; font-size: 20px;">朝阳区地方志办公室简介</h3>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">朝阳区地方志办公室是负责全区地方志编纂、研究和开发利用的工作机构，承担着《朝阳区志》、《朝阳年鉴》等志书、年鉴的编纂出版任务。</p>
                        <p style="margin-bottom: 15px; line-height: 1.6; color: #555;">区志办致力于挖掘整理朝阳区的历史文化资源，通过编纂地方志书、举办地情展览、开展地情研究等方式，传承和弘扬朝阳地域文化，为朝阳区的经济社会发展提供历史借鉴和智力支持。</p>
                    </div>
                </div>
                <div class="standards-regulations"></div>

            </div>
        </div>
    </div>
    </div>

    <!-- 下方信息页 -->
    <div class="footer-info">
        <div class="footer-content">
            <div class="footer-links">
                <div class="footer-section">
                    <p>友情链接</p>
                    <p>联系我们</p>
                    <p>版权声明</p>

                </div>

            </div>
            <p>京ICP备05008885号 京公网安备11010102003012号</p>
            <div class="footer-copyright">
                <p>版权所有： 2023 朝阳区档案馆.</p>
            </div>
            <img src="../assets/shiyedanwei.png" class="shi-icon">
        </div>
    </div>

    <script src="../assets/common/common.js"></script>
    <script src="script.js"></script>
</body>

</html>